<template>
	<view class="commissionRevenuesPage">

		<view class="backgroundImage">
			佣金收益 </br>
			排行榜
		</view>
		<view class="rankingList ">
			<view class="flex-between">
				<view class="font-weight_bold ">
					<text class="font-size_30rpx margin-right_50rpx">排名</text>
					<text class="font-size_30rpx">用户</text>
				</view>
				<view class="font-weight_bold">
					<text class="font-size_30rpx">佣金</text>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item,index) in list" :key="index">
					<view class="flex-start-center margin-top_30rpx">
						<image v-if="index==0" class="medal" src="../../static/会员卡管理端/蒙版-2.png" mode=""></image>
						<image v-if="index==1" class="medal" src="../../static/会员卡管理端/蒙版-1.png" mode=""></image>
						<image v-if="index==2"class="medal" src="../../static/会员卡管理端/蒙版.png" mode=""></image>
						<view style="width: 70rpx;text-align: center;" v-if="index!=0&&index!=1&&index!=2">{{index+1}}</view>
						<view class="flex-between margin-left_30rpx " style="width: 100%;">
							<view class="flex">
								<image class="image" :src="item.avatar" mode=""></image>
								<view class="flex-columns-center margin-left_30rpx">
									<text class="font-weight_bold margin-bottom_10rpx"
										style="font-size: 30rpx;">{{item.nickname}}</text>

									<text
										style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">手机号：{{item.phone}}
									</text>
								</view>
							</view>
							<view class="flex-column-end margin-left_30rpx" style="min-width: 120rpx;">
								<text class="font-weight_bold margin-bottom_10rpx"
									style="font-size: 30rpx;color: rgb(255, 51, 38);">￥{{item.total_commission}}</text>

								<text style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">积分：{{item.surplus_integral}}
								</text>
							</view>
						</view>
					</view>
				</block>
			</mescroll-body>

		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},

			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();

		},
		methods: {
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.userList,
					data: {
						page: scroll.num,
						limit: 10,
						order_field:'total_commission'

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.backgroundImage {
		padding: 100rpx 90rpx;
		height: 420rpx;
		font-weight: 700;
		background: url('../../static/会员卡管理端/image.png.png');
		background-repeat: no-repeat;
		background-size: contain;
		color: rgb(255, 255, 255);

		font-size: 72rpx;
	}

	.rankingList {
		width: 751rpx;
		// height: 1124.04rpx;
		border-radius: 20rpx;
		margin-top: -20rpx;
		padding: 52rpx 22rpx;
		background: rgb(255, 255, 255);

		.medal {
			width: 80rpx;
			height: 70rpx;
		}

		.image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%		}
	}
</style>